<template>
	<el-card class="layout-query">
		<el-descriptions v-loading="descLoading" :title="project.projectName" size="default" border>
			<template #extra>
				<el-button type="primary" link @click="openReport(project.id)">周进度上报</el-button>
				<el-button type="success" link @click="openDrawer">查看变更信息</el-button>
				<el-button type="primary" :icon="ArrowLeft" text @click="goBack">返回</el-button>
			</template>
			<el-descriptions-item min-width="200">
				<template #label>
					<div class="cell-item w-200">项目编码</div>
				</template>
				{{ project.projectCode }}
			</el-descriptions-item>
			<el-descriptions-item min-width="300">
				<template #label>
					<div class="cell-item">产业分类</div>
				</template>
				{{ project.industryCategory }}
			</el-descriptions-item>
			<el-descriptions-item>
				<template #label>
					<div class="cell-item">项目投资方名称</div>
				</template>
				{{ project.investorName }}
			</el-descriptions-item>
			<el-descriptions-item>
				<template #label>
					<div class="cell-item">项目计划总投资（万元）</div>
				</template>
				<el-tag size="small"> {{ project.plannedInvestment }}</el-tag>
			</el-descriptions-item>
			<el-descriptions-item min-width="200">
				<template #label>
					<div class="cell-item w-200">当前状态</div>
				</template>
				{{ project.currentStatus }}
			</el-descriptions-item>
			<el-descriptions-item min-width="200">
				<template #label>
					<div class="cell-item w-200">开始时间</div>
				</template>
				{{ project.startTime }}
			</el-descriptions-item>
			<el-descriptions-item>
				<template #label>
					<div class="cell-item">结束时间</div>
				</template>
				{{ project.endTime }}
			</el-descriptions-item>
			<el-descriptions-item>
				<template #label>
					<div class="cell-item">当前阶段持续时间</div>
				</template>
				{{ project.statusDuration }}
			</el-descriptions-item>
			<el-descriptions-item>
				<template #label>
					<div class="cell-item">项目联系人及联系方式</div>
				</template>
				{{ project.contactName + '/' + project.contactPhone }}
			</el-descriptions-item>
			<el-descriptions-item>
				<template #label>
					<div class="cell-item">包联领导及联系方式</div>
				</template>
				{{ project.linkedLeader + '/' + project.linkedLeaderPhone }}
			</el-descriptions-item>
			<el-descriptions-item>
				<template #label>
					<div class="cell-item">包联单位项目负责干部及联系电话</div>
				</template>
				{{ project.projectLeader + '/' + project.leaderPhone }}
			</el-descriptions-item>
			<el-descriptions-item>
				<template #label>
					<div class="cell-item">包联单位</div>
				</template>
				{{ project.linkedDepartment }}
			</el-descriptions-item>
			<el-descriptions-item>
				<template #label>
					<div class="cell-item w-200">本周进度说明</div>
				</template>
				{{ project.weeklyProgress }}
			</el-descriptions-item>
			<el-descriptions-item>
				<template #label>
					<div class="cell-item w-200">项目建设内容</div>
				</template>
				{{ project.constructionContent }}
			</el-descriptions-item>
		</el-descriptions>
	</el-card>
	<el-card class="layout-card">
		<el-steps :active="active" finish-status="success" simple>
			<el-step title="项目对接" @click="handleChange(1, 0)" />
			<el-step title="工商注册" @click="handleChange(2, 1)" />
			<el-step title="前期批复" @click="handleChange(3, 2)" />
			<el-step title="落地手续" @click="handleChange(4, 3)" />
		</el-steps>
		<stages-table-component :step-id="stepId" :project-id="projectId" />
	</el-card>
	<el-drawer v-model="visible" direction="rtl" @close="closeDrawer">
		<template #header>
			<h4>{{ project.projectName }}</h4>
		</template>
		<template #default>
			<el-timeline style="max-width: 600px">
				<el-timeline-item
					v-for="activity in activities"
					:key="activity.id"
					size="large"
					center
					:icon="activity.completed === 1 ? CircleCheckFilled : CircleCloseFilled"
					:type="activity.completed === 1 ? 'success' : 'danger'"
				>
					<div class="mb-10 bold-font">{{ activity.stepName }}</div>
					<div class="my-10">开始时间：{{ activity.startTime }}</div>
					<div class="my-10">完成时间：{{ activity.completionTime }}</div>
					<div class="my-10">持续时间：{{ activity.duration }}</div>
					<div class="my-10">操作人：{{ activity.updateUserName }}</div>
					<div class="my-10">备注：{{ activity.remark }}</div>
				</el-timeline-item>
			</el-timeline>
		</template>
		<template #footer>
			<div style="flex: auto">footer</div>
		</template>
	</el-drawer>

	<weekly-report ref="weeklyReportRef"></weekly-report>
</template>

<script setup lang="ts" name="ProjectDetail">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeft, CircleCheckFilled, CircleCloseFilled } from '@element-plus/icons-vue'
import StagesTableComponent from '@/views/project/detail/component/index.vue'

import { useInfoApi, useStateCountApi } from '@/api/project/info'
import { useProjectProcessStates } from '@/api/project/states'
import WeeklyReport from '@/views/project/detail/weekly-report.vue'

const route = useRoute()
const router = useRouter()
const weeklyReportRef = ref<InstanceType<typeof WeeklyReport>>()
const projectId = ref(route.params.id ? Number.parseInt(route.params.id as string) : 0)
const descLoading = ref(false)
const visible = ref(false)

const project = ref({} as any)

const stepId = ref(1)
const active = ref(0)

// 抽屉数据
const activities = ref([])

const goBack = () => {
	router.push('/project/info/index')
}

onMounted(async () => {
	projectId.value = route.params.id ? Number.parseInt(route.params.id as string) : 0
	await getProjectInfo()
})

const getProjectInfo = async () => {
	descLoading.value = true
	useInfoApi(projectId.value)
		.then(res => {
			// @ts-ignore
			if (res.code === 0) {
				project.value = res.data
			}
		})
		.finally(() => {
			descLoading.value = false
		})
}

const handleChange = (id: number, index: number) => {
	active.value = index
	stepId.value = id
}

const openDrawer = async () => {
	visible.value = true
	// 查询数据
	useProjectProcessStates(projectId.value).then(res => {
		// @ts-ignore
		if (res.code === 0) {
			activities.value = res.data
		}
	})
}
const openReport = (id: number) => {
	weeklyReportRef.value?.open(id)
}

const closeDrawer = () => {
	visible.value = false
	activities.value = []
}
</script>

<style scoped>
.bold-font {
	font-size: 18px; /* 设置字体大小，数值可以根据实际需求调整 */
	font-weight: bold; /* 设置字体加粗 */
}
</style>
